<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-29 16:56:47
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-04-01 16:27:39
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\MixedCutPreview\components\saveVideoDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 无vip 无套餐弹窗
-->
<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import MaterialsModule from '@/views/shotstack/components/MaterialsModule/index.vue'

import SaveVideo from './SaveVideo.vue'
import { ref, defineProps } from "vue";

// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipVisible = ref(false)
import { useRouter } from "vue-router";
const router = useRouter()

const dialog = ref(null);
// 保存位置弹窗
const props = defineProps({
    saveData: {
        type: Object,
        required: true,
    },
});
const saveDialog = ref(null)
// 初始化页面
const showModal = () => {
    dialog.value.showModal();
};
const closeModal = () => {
    dialog.value.closeModal();
}
// 升级套餐
const upgradePackage = () => {
    vipVisible.value = true
}
// 合成带水印视频
// 保存弹窗开关
const saveVisible = ref(false)
const cancel = () => {
    saveVisible.value = true
}

// 选择文件夹 的保存按钮
const saveName = ref({})
const saveFn = (options, id) => {
    if (options) {
        saveName.value.options = options
        saveName.value.id = id
    }
    saveVisible.value = false
    setTimeout(() => {
        closeModal()
        saveDialog.value && saveDialog.value.showModal()
    }, 500)

}

// 保存弹窗数据
const currentSaveData = ref({})
defineExpose({
    showModal,
    closeModal
});
</script>

<template>
    <div>
        <baseModel ref="dialog" :contentWidth="'460px'" :maskClosable="false">
            <template #title>
                <div class="title_box">
                    <img width="92%"
                        src="//lf3-cdn-tos.bytegoofy.com/obj/goofy/ies/muse-web/static/svg/film_with_mark.b3db665a.svg"
                        alt="">
                </div>
            </template>
            <template #content>
                <div class="content">
                    <h2>升级套餐后可合成无水印视频</h2>
                    <span>您当前为免费试用，合成视频将含水印</span>
                    <span>升级成功后关闭本弹窗，即可重新合成无水印视频。</span>
                </div>
            </template>
            <template #footer>
                <div class="bottom">
                    <a-button class="btn" key="back" @click="cancel" style="margin-right: 10px;">合成带水印视频</a-button>
                    <a-button class="btn" key="submit" type="primary" :loading="loading" :disabled="disableSubmit"
                        @click="upgradePackage">升级套餐</a-button>
                </div>
            </template>
        </baseModel>
        <SaveVideo ref="saveDialog" :data="saveName" :saveData="saveData" />
        <!-- 保存到文件夹弹窗@selfSubmit="saveVideoData"  -->
        <MaterialsModule ref="materials" jobCategory="videoSplit" :aisave='true' :requestType="true"
            :material_type="'video'" @saveName="saveFn" @selfRequest="saveVideoData" :visible="saveVisible"
            :data="currentSaveData" @onCancel="saveVisible = false" />

              <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

    </div>
</template>



<style lang="less" scoped>
.title_box {
    display: flex;
    justify-content: center;
}

.bottom {
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
        border-radius: 4px;
        overflow: hidden;
    }
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h2 {
        font-size: 20px;
        color: #1c1f23;
        font-weight: 600;
    }

    span {
        color: #1c1f23cc;
        font-size: 14px
    }
}
</style>